<template>
  <div v-loading="loading" class="user-info-main">
    <div v-if="info" class="user-detail-content">
      <div class="card-title">账号信息</div>
      <el-card :body-style="{ padding: '20px 15px'}">
        <el-row :gutter="16" type="flex">
          <el-col :lg="12">
            <el-form label-width="100px" size="small">
              <el-form-item label="登录账号：">
                {{ info.username }}
              </el-form-item>
              <el-form-item label="创建时间：">
                {{ info.createTime }}
              </el-form-item>
              <el-form-item label="组织架构：">
                <div>
                  <el-tag v-if="info.isAdmin" style="margin:3px" size="small">服务商超级管理员</el-tag>
                  <template v-else>
                    <span v-if="!info.orgList||info.orgList.length===0">-</span>
                    <el-tag v-for="item in info.orgList" :key="item.orgId" style="margin:3px" size="small">
                      {{ item.orgName }}
                    </el-tag>
                  </template>
                </div>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :lg="12">
            <el-form label-width="100px" size="small">
              <el-form-item label="用户姓名：">
                {{ info.name }}
              </el-form-item>
              <el-form-item label="手机号码：">
                {{ info.mobilePhone }}
              </el-form-item>
              <el-form-item label="角色：">
                <div>
                  <el-tag v-if="info.isAdmin" style="margin:3px" size="small">超级管理员</el-tag>
                  <template v-else>
                    <span v-if="!info.roles||info.roles.length===0">-</span>
                    <el-tag v-for="item in info.roles" :key="item.id" style="margin:3px" size="small">
                      {{ item.name }}
                    </el-tag>
                  </template>
                </div>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </el-card>
      <div class="card-title">微信绑定信息</div>
      <el-card :body-style="{ padding: '20px 15px'}">
        <el-row :gutter="16" type="flex">
          <el-col :lg="12" :xl="8">
            <el-form label-width="100px" size="small">
              <el-form-item label="微信昵称：">
                {{ info.wechat && info.wechat.nickname }}
                <el-popover
                  ref="wxQrcodePopover"
                  v-model="isShowPopover"
                  placement="right"
                  width="300"
                  trigger="click"
                  @hide="qrCodePopoverHide"
                >
                  <div v-loading="codeLoading" class="wx-qrcode-popover flex-y-center-center">
                    <div class="wx-qrcode-content flex-y-center-center">
                      <div class="qr-code">
                        <el-image v-if="qrCodeUrl" :src="qrCodeUrl" />
                      </div>
                      <div style="font-size: 12px;text-align: center;margin-top: 10px">微信扫一扫绑定账号：{{ info.username }}</div>
                    </div>
                  </div>
                  <el-link
                    v-if="!info.wechat"
                    slot="reference"
                    type="primary"
                    style="margin-left:10px;"
                    :underline="false"
                    @click="handleBind"
                  >绑定微信
                  </el-link>
                </el-popover>
                <el-link
                  v-if="info.wechat"
                  type="danger"
                  style="margin-left:10px;"
                  :underline="false"
                  @click="handleUnBind"
                >解绑
                </el-link>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
            <el-form label-width="100px" size="small">
              <el-form-item v-if="info.wechat" label="绑定时间：">
                {{ info.wechat.createTime }}
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </el-card>

      <!-- 插件 -->
      <div v-if="spInfo && spInfo.roleAlias === 'boss'" class="card-title" style="display: flex;align-items: center;">
        <span>渠道信息</span>
        <div>
          <el-button v-if="addBtnShow" type="warning" size="mini" style="margin-left: 20px;" @click="fillIn">填写</el-button>
          <el-button v-if="!addBtnShow" type="warning" size="mini" :disabled="isDisable" style="margin-left: 20px;" @click="modify">修改</el-button>
          <el-button v-if="!addBtnShow" type="warning" size="mini" style="margin-left: 20px;" @click="see">查看</el-button>
        </div>
      </div>
      <el-card v-if="spInfo && spInfo.roleAlias === 'boss'" :body-style="{ padding: '20px 15px'}">
        <el-row :gutter="16" type="flex">
          <el-col :lg="20" :xl="20">
            <span class="typeface">*渠道信息用于在渠道申请成为分账接收方,用于接收插件交易佣金,请及时配置</span>
            <p v-if="!addBtnShow" class="typeface topMargin">开户状态:<span class="typeface-txt">{{ auditStatus }}</span> </p>
            <p v-if="addBtnShow" class="typeface topMargin">暂未填写</p>
            <p v-if="auditMsgShow" class="typeface topMargin">拒绝原因:<span class="typeface-txt">{{ auditMsg }}</span> </p>
          </el-col>
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { bindWx, unBindWx, bindWxState, detail } from '@/api/user/auth'
import { userDetail } from '@/api/user/index'
export default {
  data() {
    return {
      // 配置
      // 状态
      codeLoading: false,
      loading: false,
      isStopCheckBindState: true,
      // 数据
      isShowPopover: false,
      codeNo: null,
      qrCodeUrl: null,
      info: null,
      auditStatus: '', // 开户状态
      auditMsg: '', // 拒绝原因
      auditMsgShow: false, // 拒绝原因显示和隐藏
      isDisable: true,
      addBtnShow: false
    }
  },

  computed: {
    ...mapGetters(['loginInfo', 'userInfo', 'spInfo'])
  },
  watch: {},
  beforeCreate() {
  },
  created() {
  },
  beforeMount() {
  },
  mounted() {
    this.fetchData()
    if (this.spInfo && this.spInfo.roleAlias === 'boss') {
      this.getDetaildata()
    }
  },
  beforeUpdate() {
  },
  update() {
  },
  activated() {
  },
  deactivated() {

  },
  beforeDestroy() {
    this.isStopCheckBindState = true
  },
  destroyed() {

  },
  methods: {
    // 渠道补充信息详情
    getDetaildata() {
      // const params = { userId: this.userInfo.id }
      detail().then(res => {
        console.log('渠道补充信息详情', res)
        if (res.succeed) {
          if (JSON.stringify(res.data) === '{}' || res.data === null) {
            this.addBtnShow = true
          } else {
            this.addBtnShow = false
          }
          if (res.data.auditStatus === '0' || res.data.auditStatus === '3') {
            this.auditStatus = '审核中'
            this.isDisable = true
          } else if (res.data.auditStatus === '1') {
            this.auditStatus = '审核通过'
            this.isDisable = false
          } else {
            this.auditStatus = '审核拒绝'
            this.auditMsg = res.data.auditMsg
            this.auditMsgShow = true
            this.isDisable = false
          }
        }
      })
    },
    // 修改
    modify() {
      this.$router.push({ name: 'SystemSuppData' })
    },
    // 填写
    fillIn() {
      this.$router.push({ name: 'SystemSuppData' })
    },
    // 查看
    see() {
      this.$router.push({ name: 'SystemSeeChannelData' })
    },
    /**
     * 数据组
     */
    // 初始化
    fetchData() {
      this.loading = true
      const params = { userId: this.userInfo.id }
      userDetail({ params }).then(res => {
        this.info = res.data
      }).finally(() => {
        this.loading = false
      })
    },
    /**
     * 按钮组
     */
    // 绑定
    handleBind() {
      this.codeLoading = true
      const params = { userId: this.userInfo.id }
      bindWx({ data: params }).then(res => {
        this.isShowPopover = true
        this.codeNo = res.data.codeNo
        this.qrCodeUrl = res.data.qrcodeUrl
        this.isStopCheckBindState = false
        this.checkBindState()
      }).finally(() => {
        this.codeLoading = false
      })
    },

    // 查询绑定状态
    checkBindState() {
      if (!this.codeNo) return
      const params = { codeNo: this.codeNo }
      bindWxState({ params })
        .then(res => {
          switch (res.data.state) {
            case 0: {
              const timerId = setTimeout(() => {
                if (this.isStopCheckBindState) return clearTimeout(timerId)
                this.checkBindState()
              }, 2000)
              break
            }
            case 1:
              // this.info.wechat = res.data
              this.fetchData()
              this.userInfo.avatar = res.data.headImgUrl
              this.isShowPopover = false
              this.codeNo = null
              this.qrCodeUrl = null
              this.isStopCheckBindState = true
              this.$alert(`已成功绑定微信：${res.data.nickname}`, '温馨提示', {
                confirmButtonText: '确定',
                center: true,
                type: 'warning',
                roundButton: true,
                callback: action => {
                }
              })
              break
            default :
              this.qrCodePopoverHide()
              break
          }
        })
        .catch(() => {
          this.qrCodePopoverHide()
        })
        .finally(() => {
        })
    },

    // 解绑
    handleUnBind() {
      this.$confirm(
        `确定解绑微信 ?`,
        '温馨提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true,
          roundButton: true
        }
      )
        .then(() => {
          this.loading = true
          const params = { userId: this.userInfo.id }
          unBindWx({ data: params }).then(() => {
            this.info.wechat = null
            this.userInfo.wechat = null
            this.userInfo.avatar = null
            this.$notify({
              title: '成功',
              message: '解绑成功',
              type: 'success',
              duration: 2000,
              offset: 40
            })
          }).finally(() => {
            this.loading = false
          })
        })
        .catch(() => {
        })
    },

    /**
     * 状态组
     */
    // 二维码隐藏
    qrCodePopoverHide() {
      this.isShowPopover = false
      this.codeNo = null
      this.qrCodeUrl = null
      this.isStopCheckBindState = true
    }
    /**
     * 方法组
     */
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .typeface{
    font-size: 14px;
    font-weight: bold;
    color: #6E7074;
    margin-left:15px;
    .typeface-txt{
      color: #303D52;
      font-size: 14px;
      font-weight:normal;
      margin-left: 20px;
    }
  }
  .topMargin{
    margin-top: 40px;
  }
.user-info-main {
  min-height: 500px;

  .card-title {
    font-size: 18px;
    font-weight: bold;
    padding: 20px 0;
  }

  /*reset*/
  .el-row {
    flex-wrap: wrap;

    .el-col {
      margin-bottom: 16px;
      height: 100%;
    }
  }

  /*信息卡片*/
  .el-card {
    border-radius: 20px;

    .info {
      display: flex;
      margin-top: 10px;
      font-size: 14px;
      color: #909399;
    }
  }
}

/*绑定微信*/
.wx-qrcode-popover {
  min-height: 250px;
  .qr-code {
    width: 200px;
    height: 200px;
  }
}
</style>
